<template>
  <div id="app">
    <div class="main">
      <!-- 路由视图 -->
      <router-view 
      :user-followss="userFollowss" 
      :information="information"  
      @get-player-id="getPlayerId" 
      @get-play-all-id="getPlayAllId" 
      @acs="acs"  
      @new-id="newId" 
      @recent-play="recentPlay" 
      @cloud-id="cloudId"></router-view>

      <!-- 播放器组件 -->
      <player 
      v-show="playerId" 
      :player-id="playerId" 
      :list-id="listId" 
      @set-player-id="setPlayerId"></player>
   
   <!-- mv -->
   <mv :id="mvid" v-show="mvid"></mv>
    </div>
  </div>
</template>

<script>
import player from "./components/base/player.vue"
import mv from "./components/base/mv.vue"

export default {
  data(){
    return {
      playerId:null,
      listId:null,
      mvid:null,
       userFollowss:[],
        information:null,
    }
  },
  methods:{
     cloudId(id){
        // console.log(id);
        this.playerId = id;
    },
    //最近播放
    recentPlay(id){
      console.log(id);
       this.playerId = id;
    },
    //用户界面
    userFollows(id){
        // console.log(id);
        this.userFollowss = id
    },
     informationId(id){
      // console.log(id);
      this.information = id;
      // console.log(this.information);
    },
    //获取mvid
    getmv(id){
      //调用mv地址接口
      this.mvid=id;
      console.log("获取到MVid",this.mvid);
      
    },
    // 获取子组件播放歌曲id
    getPlayerId(id){
      console.log("歌曲id",id);
      this.playerId = id;
    },
    getPlayAllId(id){
      this.listId = id;
    },
    setPlayerId(id){
      this.playerId = id;
    },
    
    acs(id){
      this.playerId = id;
    },
    //接收新歌推荐Id
      newId(id){
      this.playerId = id;
    }

  },
  components:{
    player,  //播放器
    mv
    
  },
}
</script>

<style lang="less">
@import "./assets/css/base.css";



</style>